// import React from 'react';
import React ,{ useState , useEffect } from 'react';
import { Card, Space } from 'antd';
import axios from 'axios'; 
import WorkData from './workerData';

const { Meta } = Card;

const WorkList = () => {

  // 定义状态来存储工作数据
  const [workData, setWorkData] = useState([]);

  // 在组件挂载时发送请求获取数据
  useEffect(() => {
      const fetchWorkData = async () => {
          try {
              // 发送请求获取数据
              const response = await axios.get('http://192.168.129.84:8080/v1/user/getwork'); 
              // 替换为获取我的工作信息后端 API 地址

              // 更新组件状态以存储获取到的数据
              setWorkData(response.data);
          } catch (error) {
              console.error('Error fetching work data:', error);
          }
      };
      fetchWorkData(); 
      // 调用获取数据的函数
  }, []);
   // 空数组作为第二个参数确保只在组件挂载时发送请求


    // 返回 JSX
    return (
        <Space style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
            {WorkData.map(work => (
                <Card
                    key={work.id}
                    style={{ width: 300 }}
                >
                    <Meta
                        title={work.name}
                        description={work.description}
                    />
                </Card>
            ))}
        </Space>
    );
}

export default WorkList;
